<template>
	<view class="mainbgc">
		<header-top :messageInfo="{typeFlag:true,message:titletext,liner:false}">
			<view class="rightmsg" slot="rightmsg">
				<view class="rightmsg_content flexright" @click="submit">
					<view class="nostrongtext">保存</view>
				</view>
			</view>
		</header-top>
		<view class="mainpadding">
			<view class="strongtext">
				<text class="titletext textliner">基本信息</text>
			</view>
		</view>
		<view class="mainpadding ffffff">
			<view class="inputbox">
				<view class="flexleft flex1">
					<view class="strongtext margin_right">客户名称</view>
					<view class="bitian">*</view>
				</view>
				<view class="itembox">
					<input type="text" placeholder="请输入客户名称" v-model="name">
				</view>
			</view>
			<view class="inputbox margin_top">
				<view class="flexleft flex1">
					<view class="strongtext margin_right">姓名</view>
					<view class="bitian">*</view>
				</view>
				<view class="itembox">
					<input type="text" placeholder="请输入姓名" v-model="username">
				</view>
			</view>
			<view class="inputbox margin_top">
				<view class="flexleft flex1">
					<view class="strongtext margin_right">联系电话</view>
					<view class="bitian">*</view>
				</view>
				<view class="itembox">
					<input type="number" placeholder="请输入联系电话" v-model="mobile">
				</view>
			</view>
			<view class="inputbox margin_top">
				<view class="strongtext flex1">平台客户关联号</view>
				<view class="itembox flexbetween">
					<input type="text" placeholder="请输入平台客户关联号" v-model="shop_no">
				</view>
			</view>
			<view class="inputbox margin_top">
				<view class="strongtext flex1">微信号</view>
				<view class="itembox">
					<input type="number" placeholder="请输入微信号" v-model="wechat_code">
				</view>
			</view>
			<view class="inputbox margin_top">
				<view class="strongtext flex1">支付宝账号</view>
				<view class="itembox">
					<input type="number" placeholder="请输入支付宝账号" v-model="ali_account">
				</view>
			</view>
			<view class="inputbox margin_top">
				<view class="flexleft flex1">
					<view class="strongtext margin_right">是否到付</view>
					<view class="bitian">*</view>
				</view>
				<view class="itembox">
					<u-radio-group v-model="is_df" placement="row" circle>
						<u-radio activeColor="#0BBDCB" :customStyle="{marginRight: '30rpx'}" label="否"
							name="0"></u-radio>
						<u-radio activeColor="#0BBDCB" label="是" name="1"></u-radio>
					</u-radio-group>
				</view>
			</view>

			<view class="inputbox margin_top">
				<view class="flexleft flex1">
					<view class="strongtext margin_right">客户渠道</view>
					<view class="bitian">*</view>
				</view>
				<view class="itembox flexbetween" @click="khQuDaoShow = true">
					<input type="text" placeholder="点击选择客户渠道" disabled="true" v-model="khQuDaoText">
					<view class="righticon2"></view>
				</view>
			</view>
			<view class="inputbox margin_top">
				<view class="flexleft flex1">
					<view class="strongtext margin_right">客户等级</view>
					<view class="bitian">*</view>
				</view>
				<view class="itembox flexbetween" @click="khDengJiShow=true">
					<input type="text" placeholder="点击选择客户等级" disabled="true" v-model="khDengJiText">
					<view class="righticon2"></view>
				</view>
			</view>
			<view class="inputbox margin_top">
				<view class="flexleft flex1">
					<view class="strongtext margin_right">客户类别</view>
					<view class="bitian">*</view>
				</view>
				<view class="itembox flexbetween" @click="khLeiBieShow = true">
					<input type="text" placeholder="点击选择客户类别" disabled="true" v-model="khLeiBieText">
					<view class="righticon2"></view>
				</view>
			</view>
			<view class="inputbox margin_top">
				<view class="flexleft flex1">
					<view class="strongtext margin_right">营业执照信用代码</view>
				</view>
				<view class="itembox">
					<input type="text" placeholder="请输入营业执照信用代码" v-model="yyzz_code">
				</view>
			</view>

			<view class="inputbox margin_top">
				<view class="flexleft flex1">
					<view class="strongtext margin_right">客户片区</view>
					<view class="bitian">*</view>
				</view>
				<view class="itembox flexbetween" @click="khPianQuShow= true">
					<input type="text" placeholder="请选择片区" disabled="true" v-model="khPianQuText">
					<view class="righticon2"></view>
				</view>
			</view>
			<view class="inputbox margin_top">
				<view class="flexleft flex1">
					<view class="strongtext margin_right">客户线路</view>
					<view class="bitian">*</view>
				</view>
				<view class="itembox flexbetween" @click="khXianLuShow=true">
					<input type="text" placeholder="请选择客户线路" disabled="true" v-model="khXianLuText">
					<view class="righticon2"></view>
				</view>
			</view>
			<uni-data-picker :localdata="items" placeholder="请选择住址" popup-title="请选择地区" v-model="addressinfo.county"
				@change="bindPickerChange">
				<view class="inputbox margin_top">
					<view class="flexleft flex1">
						<view class="strongtext margin_right">省市区</view>
						<view class="bitian">*</view>
					</view>
					<view class="itembox flexbetween">

						<text class="word12" v-if="!area.length">请选择住址</text>
						<text class="word13" v-else>{{ area[0] }}/{{ area[1] }}/{{ area[2] }}</text>
						<view class="righticon2"></view>
					</view>
				</view>
			</uni-data-picker>
			<view class="inputbox margin_top">
				<view class="flexleft flex1">
					<view class="strongtext margin_right">详细地址</view>
					<view class="bitian">*</view>
				</view>
				<view class="itembox flexbetween" @click="getLocation">
					<input type="text" placeholder="请选择详细地址" disabled="" v-model="address">
					<view class="addressicon2"></view>
				</view>
			</view>
			<view class="inputbox margin_top">
				<view class="flexleft flex1">
					<view class="strongtext margin_right">备注</view>
				</view>
				<view class="itembox flexbetween">
					<input type="text" placeholder="请输入备注" v-model="notes">
				</view>
			</view>
			<view class="inputbox margin_top">
				<view class="strongtext flex1">发票抬头</view>
				<view class="itembox flexbetween">
					<input type="text" placeholder="请输入发票抬头" v-model="fptt">
				</view>
			</view>
			<view class="inputbox margin_top">
				<view class="strongtext flex1">财务联系电话</view>
				<view class="itembox flexbetween">
					<input type="text" placeholder="请输入财务联系电话" v-model="cw_mobile">
				</view>
			</view>
			<view class="inputbox margin_top">
				<view class="strongtext flex1">纳税人识别号</view>
				<view class="itembox flexbetween">
					<input type="text" placeholder="请输入纳税人识别号" v-model="nsrsbh">
				</view>
			</view>
			
			<view class="inputbox margin_top">
				<view class="strongtext flex1">开户行</view>
				<view class="itembox flexbetween">
					<input type="text" placeholder="请输入开户行" v-model="open_bank">
				</view>
			</view>
			<view class="inputbox margin_top">
				<view class="strongtext flex1">银行账号</view>
				<view class="itembox flexbetween">
					<input type="text" placeholder="请输入开户账号" v-model="bank_account">
				</view>
			</view>
			<view class="inputbox margin_top" v-if="is_df==1">
				<view class="flexleft flex1">
					<view class="strongtext margin_right">信用额度</view>
				</view>
				<view class="itembox flexbetween">
					<input type="text" placeholder="请输入信用额度" v-model="xyed_price">
				</view>
			</view>
			<view class="inputbox margin_top" v-if="listid">
				<view class="strongtext flex1">入驻时间</view>
				<view class="itembox flexbetween">{{httpRequest.returnDate(createtime*1000)}}</view>
			</view>
		</view>
		<selectKHQuDao :message="{khQuDaoShow:khQuDaoShow}" @khQuDaoSure="khQuDaoSure"></selectKHQuDao><!-- 客户渠道 -->
		<selectKHDengJi :message="{khDengJiShow:khDengJiShow}" @khDengJiSure="khDengJiSure"></selectKHDengJi>
		<!-- 客户等级 -->
		<selectKHLeiBie :message="{khLeiBieShow:khLeiBieShow}" @khLeiBieSure="khLeiBieSure"></selectKHLeiBie>
		<!-- 客户类别 -->
		<selectKHPianQu :message="{khPianQuShow:khPianQuShow}" @khPianQuSure="khPianQuSure"></selectKHPianQu>
		<!-- 客户片区 -->
		<selectKHXianLu :message="{khXianLuShow:khXianLuShow}" @khXianLuSure="khXianLuSure"></selectKHXianLu>
		<!-- 客户线路 -->
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	import citys from "@/static/city/city.js"
	export default {
		data() {
			return {
				httpRequest,
				// 客户渠道
				khQuDaoShow: false,
				khQuDaoText: "",
				custom_qd_id: "", //客户渠道id
				// 客户等级
				khDengJiShow: false,
				khDengJiText: "",
				custom_level_id: "", //客户等级ID
				// 客户类别
				khLeiBieShow: false,
				khLeiBieText: "",
				custom_type_id: "", //客户类别ID
				// 客户片区
				khPianQuShow: false,
				khPianQuText: "",
				custom_area_id: "", //客户片区ID
				// 客户线路
				khXianLuShow: false,
				khXianLuText: "",
				custom_line_id: "", //客户线路ID
				name: "",
				username: "",
				wechat_code: "",
				ali_account: "",
				is_df: "0",
				yyzz_code: "",
				// #ifdef APP-PLUS
				address: "", //详细地址
				// #endif
				// #ifdef MP-WEIXIN || H5
				address: "详细地址", //详细地址
				// #endif
				notes: "",
				fptt: "",
				cw_mobile: "",
				nsrsbh: "",
				shop_no: "",
				open_bank: "",
				bank_account: "",
				xyed_price: "",
				mobile: "",
				longitude: "109.67307",
				latitude: "35.17466",
				addressinfo: {
					province: "",
					city: "",
					county: ""
				},
				items: [],
				area: [], //收获地址
				titletext: "添加客户档案",
				listid: "",
				createtime:"",
			}
		},
		onLoad(options) {
			this.listid = options.id
			this.items = JSON.parse(JSON.stringify(citys.data))
			if (this.listid) {
				this.titletext = "编辑客户档案"
				this.getdetail()
			}
		},
		methods: {
			khQuDaoSure(e) { //客户渠道
				if (e) {
					this.khQuDaoText = e.value[0].name
					this.custom_qd_id = e.value[0].id
				}
				this.khQuDaoShow = false
			},
			khDengJiSure(e) { //客户等级
				if (e) {
					this.khDengJiText = e.value[0].name
					this.custom_level_id = e.value[0].id
				}
				this.khDengJiShow = false
			},
			khLeiBieSure(e) { //客户类别
				if (e) {
					this.khLeiBieText = e.value[0].name
					this.custom_type_id = e.value[0].id
				}
				this.khLeiBieShow = false
			},
			khPianQuSure(e) { //客户片区
				if (e) {
					this.khPianQuText = e.value[0].name
					this.custom_area_id = e.value[0].id
				}
				this.khPianQuShow = false
			},
			khXianLuSure(e) { //客户线路
				if (e) {
					this.khXianLuText = e.value[0].name
					this.custom_line_id = e.value[0].id
				}
				this.khXianLuShow = false
			},
			getLocation() {
				let _this = this
				uni.chooseLocation({
					success: function(res) {
						console.log('位置名称:' + res.longitude);
						console.log('位置名称:' + res.latitude);
						console.log('详细地址:' + res.address);
						// _this.address = res.address.replace(/.+?(省|市|自治区|自治州|县|区)/g, '');
						_this.longitude = res.longitude
						_this.latitude = res.latitude
						_this.address = res.address
					}
				})
			},
			// 获取详情数据
			getdetail() {
				httpRequest.request('/dhtapi/Custom/detail', 'GET', {
					id: this.listid
				}, false, false, true).then(res => {
					let data = res.data
					this.name = data.name
					this.username = data.username
					this.wechat_code = data.wechat_code
					this.ali_account = data.ali_account
					this.is_df = data.is_df
					this.custom_qd_id = data.custom_qd_id
					this.custom_level_id = data.custom_level_id
					this.custom_type_id = data.custom_type_id
					this.yyzz_code = data.yyzz_code
					this.custom_area_id = data.custom_area_id
					this.custom_line_id = data.custom_line_id
					this.province_id = data.province_id //省id
					this.city_id = data.city_id //市id
					this.county_id = data.area_id //区id
					this.address = data.address
					this.notes = data.notes
					this.fptt = data.fptt
					this.cw_mobile = data.cw_mobile
					this.nsrsbh = data.nsrsbh
					this.shop_no = data.manystoreshop?data.manystoreshop.shop_no:""
					this.open_bank = data.open_bank
					this.bank_account = data.bank_account
					this.xyed_price = data.xyed_price
					this.mobile = data.mobile
					this.longitude = data.longitude
					this.latitude = data.latitude
					this.createtime = data.createtime
					this.addressinfo.province = data.province_id
					this.addressinfo.city = data.city_id;
					this.addressinfo.county = data.area_id
					this.khQuDaoText = data.customqd.name
					this.khDengJiText = data.customlevel.name
					this.khLeiBieText = data.customtype.name
					this.khPianQuText = data.customarea.name
					this.khXianLuText = data.customline.name
					let cityinfo = data.cityinfo.split("/")
					this.area = [cityinfo[0], cityinfo[1], cityinfo[2], ]
				})
			},
			bindPickerChange(val) {
				let area = val.detail.value
				this.area = [area[0].text, area[1].text, area[2].text];
				this.addressinfo.province = area[0].value;
				this.addressinfo.city = area[1].value;
				this.addressinfo.county = area[2].value;
			},
			isMobile(value) {
				let a = /^1[3|4|5|6|7|8|9][0-9]\d{8}$/.test(value);
				return a;
			},
			submit() {
				let _this = this;
				if (_this.name == '') {
					httpRequest.toast('请输入客户名称!')
					return false;
				}
				if (_this.username == '') {
					httpRequest.toast('请输入姓名!')
					return false;
				}
				if (_this.mobile == "") {
					httpRequest.toast('请输入联系电话!')
					return false;
				}
				if (!this.isMobile(_this.mobile)) {
					httpRequest.toast("手机号输入有误")
					return false
				}
				if (_this.custom_qd_id == '') {
					httpRequest.toast('请选择客户渠道!')
					return false;
				}
				if (_this.custom_level_id == '') {
					httpRequest.toast('请选择客户等级!')
					return false;
				}
				if (_this.custom_type_id == '') {
					httpRequest.toast('请选择客户类别!')
					return false;
				}
				if (_this.custom_area_id == '') {
					httpRequest.toast('请选择客户片区!')
					return false;
				}
				if (_this.custom_line_id == '') {
					httpRequest.toast('请选择客户线路!')
					return false;
				}
				if (!_this.addressinfo.province) {
					httpRequest.toast('请选择省市区地址!')
					return false;
				}
				if (_this.address == "") {
					httpRequest.toast('请输入详细地址!')
					return false;
				}
				if (_this.cw_mobile != "") {
					if (!this.isMobile(_this.mobile)) {
						httpRequest.toast("财务手机号输入有误")
						return false
					}
				}
				let data = {
					name: this.name,
					username: this.username,
					wechat_code: this.wechat_code,
					ali_account: this.ali_account,
					is_df: this.is_df,
					custom_qd_id: this.custom_qd_id,
					custom_level_id: this.custom_level_id,
					custom_type_id: this.custom_type_id,
					yyzz_code: this.yyzz_code,
					custom_area_id: this.custom_area_id,
					custom_line_id: this.custom_line_id,
					province_id: this.addressinfo.province, //省id
					city_id: this.addressinfo.city, //市id
					area_id: this.addressinfo.county, //区id
					address: this.address,
					notes: this.notes,
					fptt: this.fptt,
					cw_mobile: this.cw_mobile,
					nsrsbh: this.nsrsbh,
					shop_no: this.shop_no,
					open_bank: this.open_bank,
					bank_account: this.bank_account,
					xyed_price: this.xyed_price,
					mobile: this.mobile,
					longitude: this.longitude,
					latitude: this.latitude,
					id: this.listid
				}
				let url = ""
				if (!this.listid) {
					// 新增
					delete data.id
					url = '/dhtapi/Custom/addCustom'
				} else {
					// 编辑
					url = '/dhtapi/Custom/editCustom'
				}
				httpRequest.request(url, 'POST', data).then(res => {
					httpRequest.toast(res.msg)
					if (res.code == 1) {
						setTimeout(() => {
							uni.navigateBack(1)
						}, 1000)
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.flex1 {
		flex: 5;
	}

	.inputbox {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
	}

	.itembox {
		flex: 7;
		width: 100%;
		padding-bottom: 20rpx;
		border-bottom: 1rpx solid rgba(153, 153, 153, 0.06);
	}

	.strongtext {
		line-height: 42rpx;
	}
</style>